<template>
  <div class="unSaleable-box">
    <div class="gap"></div>
    <div class="title">{{ infoData.name }}</div>
    <div
      class="subTitle-box"
      v-if="infoData.sub_titles && infoData.sub_titles.length > 1"
    >
      <div class="subTitle-box left">{{ infoData.sub_titles[0] }}</div>
      <el-tooltip :content="infoData.sub_titles[1]" placement="top" trigger="click" :disabled="!isMobile()">
        <div class="subTitle-box right">{{ infoData.sub_titles[1] }}</div>
      </el-tooltip>
    </div>

    <el-table
      :data="infoData.data"
      :show-header="false"
      :row-class-name="tableRowClassName"
      :highlight-current-row="false"
      :show-overflow-tooltip="true"
      class="carousel-box"
    >
      <el-table-column
        :show-overflow-tooltip="true"
        class-name="col-name"
        prop="name"
        min-width="70"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        class-name="col-value"
        prop="value"
        min-width="30"
        :formatter="formatter"
      >
      </el-table-column>
    </el-table>
    <!-- <el-carousel
      class="carousel-box"
      :interval="3000"
      indicator-position="none"
      arrow="never"
      direction="vertical"
    >
      <el-carousel-item
        v-for="i in Math.ceil(infoData.data.length / 3)" :key="i">
        <div class="item-box" v-for="(itemName, index) in infoData.data.slice((i - 1) * 3,(i - 1) * 3 + 3)" :key="index">
          <div class="item-box left">{{ itemName.name }}</div>
          <span class="item-box right">{{ itemName.value }}</span>
        </div>
      </el-carousel-item>
    </el-carousel> -->
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import { isMobile } from '@/Utils/global'

let infoData = reactive({
  name: '',
  data: [],
  sub_titles: [],
})
const props = defineProps<{
  chartData: any
}>()

const tableRowClassName = 'warning-row'

//业绩格式化
const formatter = (row, column) => {
  var num = row.value
  if (Number(num) > 0) {
    var numArr = num.toString().split('.')
    num = numArr[0]
    var result = ''
    while (num.length > 3) {
      result = ',' + num.slice(-3) + result
      num = num.slice(0, num.length - 3)
    }
    if (num) {
      result = num + result
    }
    if (numArr.length > 1) {
      result = result + '.' + numArr[1]
    }
    return result
  }
  return num
}

onMounted(() => {
  infoData.data = props.chartData.data
  infoData.name = props.chartData.name
  infoData.sub_titles = props.chartData.sub_titles
})

watch(
  () => props.chartData,
  () => {
    infoData.data = props.chartData.data
    infoData.name = props.chartData.name
  },
  { deep: true }
)
</script>

<style lang="scss" scoped>
.unSaleable-box {
  width: auto;
  height: 215px;
  // height: 100%;
  margin: 0 10px;
}
.carousel-box {
  width: 100%;
  height: calc(100% - 85px);
  // overflow:scroll;
  background-color: transparent;
}

:deep(.el-table) {
  --el-table-border-color: none;
  border-color: none;
}
:deep(.el-table tbody tr:hover > td) {
  // background-color: rebeccapurple !important;
  // color: #ffffff;

  // 可以选择隐藏
  background-color: transparent !important;
}

:deep(.el-table__body) {
  //-webkit-border-horizontal-spacing: 13px;  // 水平间距
  -webkit-border-vertical-spacing: 4px; // 垂直间距
}

:deep(.el-table td.el-table__cell) {
  border-bottom: none;
  //border-bottom: 1px solid transparent !important;
}

:deep(.warning-row) {
  background-color: #1f275e !important;
}
:deep(.col-name) {
  color: white;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
:deep(.col-value) {
  color: #00edff;
  text-align: right;
}

.gap {
  height: 2px;
  width: 100%;
}
.title {
  display: flex;
  height: 35px;
  line-height: 35px;
  width: auto;
  font-size: 18px;
  color: white;
  background-color: #1f275e;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  margin-top: 5px;
}
.subTitle-box {
  display: flex;
  height: 35px;
  line-height: 35px;
  width: 100%;
  font-size: 14px;
  font-weight: bold;
  color: white;
  align-items: center;
  justify-content: space-between;
  // 不换行
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  .left {
    display: flex;
    padding-left: 10px;
    width: 60%;
    text-align: left;
  }
  .right {
    display: flex;
    width: 40%;
    display:block;
    padding-right: 10px;
    text-align: right;
    color: #00edff;
  }
}
.item-box {
  display: flex;
  height: 40px;
  line-height: 40px;
  width: 100%;
  font-size: 13px;
  background-color: #1f275e;
  margin-bottom: 5px;
  border-radius: 2px;
  .left {
    width: 70%;
    justify-content: flex-start;
    color: white;
    padding-left: 5px;
    display: block;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .right {
    width: 30%;
    justify-content: flex-end;
    color: #00edff;
    padding-right: 5px;
  }
}
</style>
